<div class="row" [class.border-bottom]="!isLastGroupedResponses"
    *ngIf="responses.length && responses[0].allResponses.length && hasRealResponses">
  <div id="users-details" class="col-md-3">
    <div>
      {{ isGrq ? 'To' : 'From' }}:
      {{ responses[0].allResponses[0][this.isGrq ? 'recipient' : 'giver'] === '-' ? 'No Specific User' : responses[0].allResponses[0][this.isGrq ? 'recipient' : 'giver'] }}
      {{ teamInfo[isGrq ? 'recipient' : 'giver'] }}
    </div>
    <div class="top-padded">
      {{ isGrq ? 'From' : 'To' }}:
      {{ responses[0].allResponses[0][this.isGrq ? 'giver' : 'recipient'] === '-' ? 'No Specific User' : responses[0].allResponses[0][this.isGrq ? 'giver' : 'recipient'] }}
      {{ teamInfo[isGrq ? 'giver' : 'recipient'] }}
    </div>
    <div class="top-padded">
      <tm-response-moderation-button *ngIf="!isGrq && responses[0].allResponses[0].relatedGiverEmail" [session]="session"
                                     [relatedGiverEmail]="responses[0].allResponses[0].relatedGiverEmail"
                                     [isGiverInstructor]="responses[0].feedbackQuestion.giverType === 'INSTRUCTORS'" btnStyle="LIGHT"></tm-response-moderation-button>
    </div>
  </div>
  <div class="col-md-9">
    <div id="question-panel-{{ response.feedbackQuestion.questionNumber }}" *ngFor="let response of responses">
      <div class="card bottom-padded alert-primary-border">
        <div class="card-header alert alert-primary alert-no-bottom">
          <tm-question-text-with-info [questionNumber]="response.feedbackQuestion.questionNumber" [questionDetails]="response.feedbackQuestion.questionDetails"></tm-question-text-with-info>
        </div>
        <div class="card-body">
          <div id="response" style="margin: 0;">
            <tm-single-response
                    [class.color-neutral]="response.allResponses[0].isMissingResponse"
                    [responseDetails]="response.allResponses[0].responseDetails"
                    [questionDetails]="response.feedbackQuestion.questionDetails"
                    [giverEmail]="response.allResponses[0].giverEmail"
                    [recipientEmail]="response.allResponses[0].recipientEmail"
                    [statistics]="response.questionStatistics"></tm-single-response>
            <button aria-label="Add comment" id="btn-add-comment" (click)="toggleAddComment(response.allResponses[0].responseId)"
                    *ngIf="!response.allResponses[0].isMissingResponse && response.feedbackQuestion.questionType !== 'CONTRIB'"
                    ngbTooltip="Add comment" type="button" class="btn btn-outline-primary btn-sm comment-button">
              <i class="fas fa-comment"></i>
            </button>
          </div>
          <tm-comment-row *ngIf="response.allResponses[0].participantComment"
                          [model]="response.allResponses[0].participantComment | commentToCommentRowModel: session.timeZone"
                          [questionShowResponsesTo]="response.feedbackQuestion.showResponsesTo"
                          [isDisabled]="true" [isVisibilityOptionEnabled]="false"
                          [mode]="CommentRowMode.EDIT"
                          [isFeedbackParticipantComment]="true"
                          [shouldHideDeleteButton]="true"
                          [shouldHideEditButton]="true"
          ></tm-comment-row>
          <br/>
          <tm-comment-table *ngIf="!response.allResponses[0].isMissingResponse && response.feedbackQuestion.questionType !== 'CONTRIB'"
                            [model]="instructorCommentTableModel[response.allResponses[0].responseId]"
                            [questionShowResponsesTo]="response.feedbackQuestion.showResponsesTo"
                            [response]="response.allResponses[0]"
                            (modelChange)="triggerModelChangeForSingleResponse(response.allResponses[0].responseId, $event)"
                            (updateCommentEvent)="triggerUpdateCommentEvent(response.allResponses[0].responseId, $event)"
                            (deleteCommentEvent)="triggerDeleteCommentEvent(response.allResponses[0].responseId, $event)"
                            (saveNewCommentEvent)="triggerSaveNewCommentEvent(response.allResponses[0].responseId)"
          ></tm-comment-table>
        </div>
      </div>
    </div>
  </div>
</div>
